<!-- 课程介绍 -->
<template>
  <view class="px-4 py-4">
    <u-image :src="state.data?.poster_image" width="686" height="auto" mode="widthFix" />
    <view class="mt-3 c-#333 text-40">{{ state.data?.title || '' }}</view>
    <view class="flex items-center mt-3">
      <view class="flex-1 c-#ff513a text-40">￥{{ state.data?.price ? Number(state.data?.price).toFixed(2) : '0.00' }}</view>
      <view class="flex-shrink-0 c-#999 text-28">{{ state.data?.periods_number || '' }}</view>
    </view>
    <u-line margin="24rpx 0"></u-line>
    <view class="c-#666 text-28">上课时间：{{ state.data?.class_time || '' }}</view>
    <view class="mt-3 c-#666 text-28">上课地点：{{ state.data?.location || '' }}{{ state.data?.address || '' }}</view>
  </view>
  <view class="h-150 mt-8"></view>
  <view class="bottom-wrap-16 w-full bg-#fff border-top px-4">
    <view class="popup-button-style" :class="[{ 'pointer-events-none': state.data?.already_registered }]"
      @click="navigate(`/package_square/pages/course/preview/appointment?id=${state.id}`)">
      {{ state.data?.already_registered ? '已报名' : '立即报名' }}
    </view>
  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni';
import { getOfflineCourseDetail } from '@/common/http/module/square';
import { numFormat } from '@/common/util/format';

const state = reactive({
  id: '',
  data: ''
})

function loadData() {
  getOfflineCourseDetail(state.id).then(res => {
    state.data = res.data
  })
}

onLoad(options => {
  state.id = options.id
  loadData()
})
</script>

<style lang="scss" scoped>
.border-top {
  border-top: 2rpx solid #eee;
}

.input-style {
  display: flex;
  align-items: center;
  padding-left: 32rpx;
  background-color: #f5f5f5;
  color: #b5b5b5;
  border-radius: 12rpx;
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  border: 2rpx solid #DCDCDC
}

.popup-tap-style {
  display: inline-block;
  padding: 12rpx 44rpx;
  border: 2rpx solid #f4af22;
  color: #F4AF22;
  font-weight: 400;
  font-size: 28rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
}

.popup-tap-style-selected {
  display: inline-block;
  padding: 12rpx 44rpx;
  color: #999999;
  font-weight: 400;
  font-size: 28rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5
}

.popup-input-style {
  display: flex;
  align-items: center;
  padding-left: 30rpx;
  background-color: #ffffff;
  color: #999999;
  border-radius: 12rpx;
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  border: 2rpx solid #666666
}

.popup-button-style {
  width: 100%;
  height: 68rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
}
</style>
